<template>
  <div class="user">
    <div class="center">
      <div class="information">
        <div>
          <img src="../assets/img/sezhi.png" alt="">
        </div>
        <div>
          <div v-if="this.uid<1">
            <router-link to="/login" class="x-link">
              <img src="../assets/img/unlogin.png" alt="">
            </router-link>
            <div>
              <h1>未登录</h1>
              <p>期待与你一起实现理想家</p>
            </div>
          </div>
          <div v-else>
            <img src="../assets/img/unlogin.png" alt="">
            <div>
              <h1>{{ this.uname }}</h1>
              <p>个性签名</p>
            </div>
          </div>
        </div>
        <van-grid :border="false" :column-num="5">
          <van-grid-item>
            <h2>0</h2>
            <div>关注</div>
          </van-grid-item>
          <van-grid-item>
            <h2>0</h2>
            <div>收藏</div>
          </van-grid-item>
          <van-grid-item>
            <h2>0</h2>
            <div>心愿单</div>
          </van-grid-item>
          <van-grid-item>
            <h2>0</h2>
            <div>购物车</div>
          </van-grid-item>
          <van-grid-item>
            <h2>0</h2>
            <div>优惠劵</div>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="shop">
        <div class="boxTop">
          <h2>商品订单</h2>
          <router-link to="/shop/0">
            <span>查看全部订单</span>
            <van-icon name="arrow" size="12px"></van-icon>
          </router-link>
        </div>
        <div class="boxButton">
          <van-grid :column-num="3" :border="false">
            <van-grid-item v-for="(item,i) in shop" :key="i" :text="item.text" :icon="item.icon"
                           @click="toShop(i+1)"></van-grid-item>
          </van-grid>
        </div>
      </div>
      <div>
        <van-tabbar v-model="active" fixed>
          <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
          <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
          <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
        </van-tabbar>
      </div>
    </div>
  </div>
</template>

<script>


import {mapState} from "vuex"


export default {
  name: "Login",
  computed: {
    ...mapState(["uname", "uid"])
  },
  data() {
    return {
      active: 2,
      shop: [
        {
          text: "签约",
          icon: require('../assets/img/shop7.png')
        },
        {
          text: "待付款",
          icon: require('../assets/img/shop1.png')
        },


        {
          text: "订单",
          icon: require('../assets/img/shop6.png')
        },
      ]
    }
  },
  methods: {
    toShop(i) {
      this.$router.push({
            path: `/shop/${i}`
      }
      )
    }
  }
}
</script>

<style lang="scss">
@import "../../public/sass/user";
</style>
